<!--
 * @Author: zhouyaxue
 * @Date: 2022-11-30 17:39:08
 * @LastEditors: zhouyaxue
 * @LastEditTime: 2023-01-10 10:18:00
-->
<!--  -->
<template>
  <div class="footer">
    <div class="footer-main">
      <div class="footer-main-top">
        <div>
          <div class="left">
            <div class="item itemRight">
              <div class="top font-4">联系我们</div>
              <div class="bottom font-4">
                <div class="nav font-4">
                  电话：
                  <span class="phone">400-172-9943</span>
                </div>
                <div class="nav font-4">
                  <span style="line-height: 20px">邮箱：</span>
                  <span >
                    sales@labauto.com.cn
                  </span>
                </div>
                <div class="nav font-4">
                  地址：
                  <span class="phone">北京市昌平区国际信息化产业基地立业路5号1号楼2层</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import router from "@/router";
import { isHttp } from "@/libs/validate";


const { dispatch, commit, state } = useStore();


const infos = ref<any>({});
const footerList = ref([
  {
    name: "友情链接",
    list: [],
  },
  {
    name: "交流合作", //
    list: [],
  },
  {
    name: "新闻资讯",
    list: [
      {
        name: "郑数动态",
        path: "/news",
        query: {
          category: 2,
        },
      },
      {
        name: "公示公告",
        path: "/news",
        query: {
          category: 1,
        },
      },
      {
        name: "行业资讯",
        path: "/news",
        query: {
          category: 3,
        },
      },
      // {
      //   name: "联盟动态",
      //   path: "/news",
      //   query: {
      //     category: 4,
      //   },
      // },
    ],
  },

  // {
  //   name: "服务声明",
  //   list: [
  //     {
  //       name: "法律声明",
  //       path: "/serviceStatement",
  //     },
  //     {
  //       name: "发展规划",
  //       path: "",
  //     },
  //     {
  //       name: "发展历程",
  //       path: "",
  //     },
  //     {
  //       name: '服务条款',
  //       path: '/service',
  //     },
  //   ],
  // },
]);
function nav(path: string, query?: any, id?: string) {
  if (isHttp(path)) {
    window.open(path, "_blank");
  } else if (id) {
    router.push({
      path,
      query: {
        id,
        footer: "1",
      },
    });
  } else {
    router.push({
      path,
      query,
    });
  }
}
//web前台网站信息数据
async function info() {
  const result = await dispatch("info");
  if (result.code === 0) {
    infos.value = result.data;
    commit('setInfor', result.data)
  }
}

onMounted(() => {


});
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;

  // padding-bottom: 20px;
  // background: url("../../assets/images/footer.png") no-repeat center center/100%
  //   100%;
  &-main {
    // width: $center-width;
    height: 100%;
    // margin: auto;

    &-top {
      background: #0a1633;
      padding: 25px 0 20px;

      >div {
        display: flex;
        justify-content: space-between;
        width: $center-width;
        margin: 0 auto;

        .left {
          display: flex;
          justify-content: space-between;

          .item {
            max-width: 300px;
            margin-right: 87px;

            .top {
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              line-height: 16px;
            }

            .bottom {
              margin-top: 10px;
              font-weight: 400;
              font-size: 14px;
              color: #a8abb2;
              line-height: 21px;

              .nav {
                margin-bottom: 6px;
               
              }

              .nav:hover {
                color: $hover-color;
              }
            }
          }

          .itemRight {
            margin-right: 0;

            .bottom {
              .nav:hover {
                color: #a8abb2;
              }
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 125px;
            height: 125px;
            display: block;
          }

          span {
            font-weight: 400;
            font-size: 14px;
            color: #909399;
            line-height: 16px;
            margin-top: 6px;
          }
        }
      }
    }

    &-bottom {
      text-align: center;
      line-height: 61px;
      background: #050a16;
      font-weight: 400;
      font-size: 14px;
      color: #a8abb2;

      a {
        // color: #ffffff;
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
        // text-decoration: none;
        font-weight: 400;
        font-size: 14px;
        color: #a8abb2;

        &:hover {
          color: $hover-color;
        }
      }
    }
  }
}
</style>
